<div class="media-viewer-container embedplayer video">
    <!-- Video block !-->
    <div class="media-viewer">
        <!-- Sharing options -->
        <div class="sharefile-block hidden">
            <div class="dialog-container sharefile-container">
                <div class="close-overlay right">
                    <i class="medium-icon icons-img close-icon"></i>
                </div>
                <div class="v-btn logo-container right">
                    <div class="logo-icon"></div>
                </div>
                <div class="viewer-filename">
                    <div class="download file-info">
                        <div class="download info-txt big-txt filename">
                            <span class="filename"></span>
                            <span class="extension"></span>
                        </div>
                    </div>
                </div>
                <div class="dialog-aligner sharefile-aligner">
                    <div class="dialog-wrapper sharefile-option-wrapper">
                        <div class="sharefile-sections share-link">
                            <div class="sharefile-title">[$5622]</div>
                            <div class="copy-link">
                                <div class="sharefile-content">
                                    <i class="sprite-embed-mono icon-link-01-small-regular-outline"></i>
                                    <div class="tab-content" id="share-link-field"></div>
                                </div>
                                <div class="button default-green-button copy">[$63]</div>
                            </div>
                        </div>
                        <div class="sharefile-sections embed-code">
                            <div class="sharefile-title">[$17407]</div>
                            <div class="copy-link">
                                <div class="sharefile-content">
                                    <i class="sprite-embed-mono icon-code-small-regular-outline"></i>
                                    <div class="tab-content" id="embed-code-field"></div>
                                </div>
                                <div class="button default-green-button copy">[$63]</div>
                            </div>
                            <div class="sharefile-settings">
                                <div class="settings-row">
                                    <div class="checkbox-item">
                                        <label for="timecheckbox" class="radio-txt">[$17822]
                                            <input type="checkbox" name="" id="timecheckbox" class="checkboxOff"/>
                                            <span class="checkmark"></span>
                                        </label>
                                        <div class="start-at-time">
                                            <input type="text" value="00:00" id="timeoffset" readonly/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="toast-notification">
            <div class="toast-message"></div>
        </div>
        <!-- Transfer limitation overlay -->
        <div class="transfer-limitation-block hidden">
            <div class="dialog-container transfer-limitation-container">
                <div class="close-overlay right">
                    <i class="medium-icon icons-img close-icon"></i>
                </div>
                <div class="dialog-aligner transfer-limitation-aligner">
                    <div class="dialog-wrapper transfer-limitation-wrapper">
                        <div class="transfer-heading">[$17]</div>
                        <div class="transfer-body">[$120]</div>
                        <div class="transfer-buttons">
                            <div class="upgrade-option hidden">
                                <div class="button default-red-button">[$16386]</div>
                            </div>
                            <div class="signin-register-option">
                                <div class="button default-transparent-button inline login">[$16345]</div>
                                <div class="button default-red-button inline signup">[$209]</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- File Removed -->
        <div class="file-removed-block hidden">
            <div class="dialog-container file-removed-container">
                <div class="dialog-aligner file-removed-aligner">
                    <div class="dialog-wrapper file-removed-wrapper">
                        <div class="file-removed-heading">[$23]</div>
                        <div class="file-removed-body"></div>
                    </div>
                </div>
            </div>
            <div class="logo-container">
                <div class="logo-icon"></div>
            </div>
        </div>

        <!-- Dropdown/context menu
        Add class "mobile-mode" to the dropdown when viewing the iframe video on mobile devices -->
        <div class="dropdown body files-menu context hidden" style="height: auto; border-radius: 8px;">
            <div class="close-overlay right">
                <i class="medium-icon icons-img close-icon"></i>
            </div>
            <div class="dropdown-aligner">
                <div class="dropdown-wrapper">
                    <div class="dropdown-section">
                        <a class="dropdown-item login-item" style="display: block;">
                            <i class="small-icon context login"></i>
                            <div class="contextmenu useravatar hidden">
                                <div class="avatar-wrapper avatar"><span></span></div>
                            </div>
                            <span class="login-text">[$16345]</span>
                        </a>
                        <hr>
                    </div>
                    <div class="dropdown-section">
                        <a class="dropdown-item getlink-item" style="display: block;">
                            <i class="small-icon context get-link"></i><span>[$5622]</span>
                        </a>
                    </div>
                    <div class="dropdown-section">
                        <a class="dropdown-item embedcode-item" style="display: block;">
                            <i class="small-icon context embed-code"></i><span>[$17407]</span>
                        </a>
                        <hr>
                    </div>
                    <div class="dropdown-section">
                        <a class="dropdown-item viewonmega-item" style="display: block;">
                            <i class="small-icon context mega"></i><span>[$16518]</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Add main-blur-block to video-wrapper when any overlay is visible.
        Pause the video as well when an overlay is visible -->
        <div class="video-wrapper">
            <!-- Video Header -->
            <div class="viewer-top-bl">
                <div class="viewer-filename">
                    <div class="download file-info">
                        <div class="download info-txt big-txt filename">
                            <span class="filename"></span>
                            <span class="extension"></span>
                        </div>
                    </div>
                </div>
                <!-- Will Replace with a more appropriate share icon -->
                <div class="v-btn right share">
                    <i class="sprite-embed-mono icon-share-network-small-regular-outline"></i>
                </div>
                <div class="v-btn logo-container right">
                    <div class="logo-icon"></div>
                </div>
                <div class="clear"></div>
            </div>
            <video id="video" data-autoplayvideo="false" data-playvideoonclick="false"></video>

            <div class="loader-grad hidden">
                <i class="sprite-embed-mono icon-loader-grad-small-regular-outline"></i>
            </div>
            <div class="play-video-button">
                <i class="sprite-embed-mono icon-play-small-regular-solid"></i>
            </div>
            <div class="play-pause-video-button hidden">
                <i class="sprite-embed-mono icon-play-small-regular-solid"></i>
            </div>
            <div class="watch-again-button hidden">
                <i class="sprite-embed-mono icon-rotate-ccw-small-regular-outline"></i>
                <span>[$video_player_watch_again]</span>
            </div>
            <div class="watch-again-button-overlay"></div>
            <div class="viewer-pending hidden">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </div>
            <div class="loader-grad-overlay"></div>
            <!-- Will add soon. This button should direct you to the dl page for the file -->

            <div class="viewer-vad-control lato hidden"></div>

            <div class="video-progress-bar vad" title="">
                <div class="video-time-bar"></div>
            </div>

            <!-- Video Footer -->
            <div class="viewer-bars video-controls" data-state="hidden">
                <div class="video-progress-block">
                    <div class="video-progress-bar">
                        <div class="video-time-bar"></div>
                        <div class="video-expected-time-bar">
                            <div class="video-progress-time">
                                00:00
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="bar">
                    <li>
                        <div class="playpause-wrapper wrapper">
                            <button class="v-btn playpause" aria-label="[[play pause]]" data-state="play">
                                <!-- Active state: .icon-pause !-->
                                <i class="sprite-embed-mono icon-play-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_play]
                            </div>
                        </div>
                        <div class="vol-wrapper wrapper">
                            <button class="v-btn mute" data-state="mute" aria-label="[[volume]]">
                                <!-- Active state: .icon-volume-muted !-->
                                <i class="sprite-embed-mono icon-volume-max-small-regular-outline"></i>
                            </button>
                            <div class="video-vol-range">
                                <div class="volume-bar"><span></span></div>
                            </div>
                            <div class="tooltip">
                                [$video_player_mute]
                            </div>
                        </div>
                    </li>
                    <li class="timing">
                        <div class="video-timing current">
                            00:00
                        </div>
                        <div>
                            /
                        </div>
                        <div class="video-timing duration">
                            00:00
                        </div>
                    </li>
                    <li>
                        <div class="speed-wrapper wrapper">
                            <button class="v-btn speed" aria-label="[[speed]]" data-state="speed">
                                <i class="sprite-embed-mono icon-playback-1x-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_playback_speed]
                            </div>
                        </div>
                        <div class="repeat-wrapper wrapper">
                            <button class="v-btn repeat" aria-label="[[repeat]]" data-state="repeat">
                                <i class="sprite-embed-mono icon-repeat-one-small-regular-solid"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_repeat]
                            </div>
                        </div>
                        <div class="subtitles-wrapper wrapper">
                            <button class="v-btn subtitles" aria-label="[[subtitles]]" data-state="subtitles">
                                <i class="sprite-embed-mono icon-subtitles-02-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_subtitles]
                            </div>
                        </div>
                        <div class="settings-wrapper wrapper">
                            <button class="v-btn settings" aria-label="[[settings]]" data-state="settings">
                                <i class="sprite-embed-mono icon-settings-02-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$823]
                            </div>
                        </div>
                        <div class="fs-wrapper wrapper">
                            <button class="v-btn fs" aria-label="[[fullscreen]]" data-state="go-fullscreen">
                                <!-- Active state: .icon-fullscreen-leave !-->
                                <i class="sprite-embed-mono icon-maximize-02-small-regular-outline"></i>
                            </button>
                            <div class="tooltip">
                                [$video_player_fullscreen]
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <template id="media-viewer-speed-menu">
                <nav class="context-menu playback-speed options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <div class="title">[$video_player_playback_speed]</div>
                        </li>
                        <li>
                            <button class="05x">
                                <span>[$video_player_speed_0.5x]</span>
                                <i class="sprite-embed-mono icon-active icon-check-small-regular-outline hidden"></i>
                            </button>
                        </li>
                        <li>
                            <button class="1x">
                                <span>[$video_player_speed_1x]</span>
                                <i class="sprite-embed-mono icon-active icon-check-small-regular-outline"></i>
                            </button>
                        </li>
                        <li>
                            <button class="15x">
                                <span>[$video_player_speed_1.5x]</span>
                                <i class="sprite-embed-mono icon-active icon-check-small-regular-outline hidden"></i>
                            </button>
                        </li>
                        <li>
                            <button class="2x">
                                <span>[$video_player_speed_2x]</span>
                                <i class="sprite-embed-mono icon-active icon-check-small-regular-outline hidden"></i>
                            </button>
                        </li>
                    </ul>
                </nav>
            </template>
            <template id="media-viewer-video-settings-menu">
                <nav class="context-menu settings options-menu avoid-bottom" aria-expanded="false">
                    <ul>
                        <li>
                            <div class="settings-wrapper">
                                <span>[$video_player_brightness]</span>
                                <div class="settings-range">
                                    <span>0</span>
                                    <div class="settings-bar brightness-bar"><span></span></div>
                                    <div class="value">50</div>
                                    <span>100</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="settings-wrapper">
                                <span>[$video_player_contrast]</span>
                                <div class="settings-range">
                                    <span>0</span>
                                    <div class="settings-bar contrast-bar"><span></span></div>
                                    <div class="value">50</div>
                                    <span>100</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="settings-wrapper">
                                <span>[$video_player_saturation]</span>
                                <div class="settings-range">
                                    <span>0</span>
                                    <div class="settings-bar saturate-bar"><span></span></div>
                                    <div class="value">50</div>
                                    <span>100</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <button class="reset-all invisible">[$video_player_reset_all]</button>
                        </li>
                    </ul>
                </nav>
            </template>
        </div>
        <div class="audio-wrapper">
            <div class="audio-thumbnail"><img /></div>
            <div class="audio-container">
                <div class="viewer-bars top">
                    <div class="viewer-filename">
                        <div class="download file-info">
                            <div class="download info-txt big-txt filename">
                                <span class="filename"></span>
                                <span class="extension"></span>
                            </div>
                        </div>
                    </div>
                    <div class="v-btn right share simpletip" data-simpletip="[$copy_link]">
                        <i class="sprite-embed-mono icon-share-network-small-regular-outline"></i>
                    </div>
                    <div class="v-btn logo-container right">
                        <div class="logo-icon"></div>
                    </div>
                </div>
                <video id="audio" data-autoplayvideo="false" data-playvideoonclick="false"></video>
                <div class="viewer-bars video-controls">
                    <div class="play-video-button">
                        <i class="sprite-embed-mono icon-play-small-regular-solid"></i>
                    </div>
                    <div class="playpause-wrapper hidden">
                        <button class="v-btn playpause" aria-label="[[play pause]]" data-state="play">
                            <!-- Active state: .icon-pause !-->
                            <i class="sprite-embed-mono icon-play-small-regular-outline"></i>
                        </button>
                    </div>
                    <div class="video-timing current">
                        00:00
                    </div>
                    <div class="video-progress-block">
                        <div class="video-progress-bar">
                            <div class="video-time-bar"></div>
                        </div>
                    </div>
                    <div class="video-timing duration">
                        00:00
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<textarea id="chromeclipboard" title="copy" style="position:absolute;top:-100%;left:-100%;opacity:0" readonly></textarea>
